export function createLoginPage() {
	let loginPage = `
        <form class="login">
            <p>登录界面</p>
            <input type="text" placeholder="用户名" name="username"/>
            <input type="password" placeholder="密码" name="password"/>
            <input type="submit" class="btn" value="登  录" />
        </form>
    `
	let divEle = document.createElement('div')
	divEle.setAttribute('class', 'login-wrapper')
	divEle.innerHTML = loginPage

	const formEle = divEle.querySelector('form')
	const userInput = divEle.querySelector('input[name="username"]')
	const passwordInput = divEle.querySelector('input[name="password"]')
	formEle.addEventListener('submit', function (e) {
		e = e || window.event
		e.preventDefault()
		let username=userInput.value
		let password = passwordInput.value
		if(username == 'admin' && password == '123456'){
			location.href = './#home'
		}else{
			alert('用户名或密码出错！')
		}
	})

	return divEle
}

export function createHomePage() {
	let homePage = `<h2>主界面</h2>
                    <ul>
                        <li>什么是多页面应用</li>
                        <li>路由是什么</li>
                        <li>spa单页面应用介绍</li>
                        <li>实现单页应用路由</li>
                        <li><a href="./#login">退出登录</a></li>
                    </ul>`
	let divEle = document.createElement('div')
	divEle.setAttribute('class', 'main-wraper')
	divEle.innerHTML = homePage
	return divEle
}
